<template>
    <div :id="`main`+Index" style="height: 300px;"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        props:{
            Index:{}
        },
        data() {
            return {
            };
        },
        mounted() {
            this.getEchartsData()
        },
        methods: {
          getEchartsData(){
              var chartDom = document.getElementById('main'+this.Index);
              var myChart = echarts.init(chartDom, 'dark');
              var option;

              option = {
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  top: '5%',
                  left: 'center'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                    },
                    label: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: [
                      { value: 1048, name: 'Search Engine' },
                      { value: 735, name: 'Direct' },
                      { value: 580, name: 'Email' },
                      { value: 484, name: 'Union Ads' },
                      { value: 300, name: 'Video Ads' }
                    ]
                  }
                ]
              };
              option && myChart.setOption(option);
              window.addEventListener('resize', function() {
                  myChart.resize() // 监听窗口是否变化,变化的话就重新绘制图表
              })
          },

        }
    }
</script>

<style scoped lang="scss">
    * {
        font-family: Source Han Sans CN;
    }

    .dismantle /deep/ .el-progress-circle {

        // 进度条颜色
        svg>path:nth-child(2) {
            stroke: url(#dismantle); // 该url() 中填入的是, 对应组件中的 id 名
        }
    }

    .circle-center {
        margin-top: 30px;
        font-family: Source Han Sans CN;
        font-size: 16px;
        color: #6D77FA;
    }

    .border-1 {
        border: 1px solid #E3E6F5;
        border-radius: 18px;
    }

    .h-210 {
        height: 210px;
        box-sizing: border-box;
        color: #2F3142;
        font-size: 18px;
    }

    .progress {
        box-sizing: border-box;
        padding: 20px;
        // width: 100%;
        height: 265px;
        background: #FFFFFF;
        // border: 2px solid #E3E6F5;
        border-radius: 18px;
    }

    /deep/ .el-progress__text {
        color: #626BF1;
        font-size: 28px !important;
        font-family: PingFang SC;
    }

    .main-cont {
        background-color: rgb(8, 22, 38);
        padding: 40px;

        .m-h3 {
            color: rgb(23, 162, 181);
            font-size: 24px;
        }

        .item-list {

            .bg-purple {
                // width: 486px;
                height: 197px;
                background: #FFFFFF;
                border: 1px solid #E3E6F5;
                border-radius: 18px;
            }

            .grid-content {
                position: relative;
                min-height: 36px;
            }

            .top {
                box-sizing: border-box;
                padding: 10px 30px;
                width: 100%;

                h3 {
                    font-size: 20px;
                }

                .img {
                    width: 45px;
                    height: 45px;
                }
            }

            .bottom {
                box-sizing: border-box;
                margin-top: 40px;

                .time-num {
                    padding: 0 7%;
                    font-size: 40px;
                    line-height: 40px;
                    color: #488AF7;
                }

                .learn-num {
                    color: #FF5A77;
                }

                .fb-num {
                    color: #FF9B4F;
                }
            }

            .time {
                position: absolute;
                top: 0;
                left: 0;
                width: 110px;
            }

            .learn {
                position: absolute;
                top: 0;
                left: 40px;
                width: 200px;
                // height: 65px;
            }

            .fb {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 110px;
            }


        }

        .tb {
            margin: 30px 0 !important;
            box-sizing: border-box;

            .echarts {
                height: 280px;
                background: #FFFFFF;
                border: 1px solid #E3E6F5;
                border-radius: 18px;
            }
        }
    }

    .list {
        // padding: 20px;
        font-size: 16px;
        margin-bottom: 10px;

        .avatar {
            min-width: 40px;
        }

        .name {
            width: 60px;
            min-width: 80px;

        }

        .tip {
            margin-right: 15px;
            min-width: 80px;
            height: 22px;
            line-height: 22px;
            background: #CBF8EE;
            border-radius: 3px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #0A9576;
        }

        .number {
            min-width: 120px;
        }

        .add-time {
            min-width: 140px;
        }

        .over-hidden {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .circle {
            margin-right: 20px;
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #FCBB4B;
            border-radius: 50%;
        }
    }

    /deep/ .el-empty{
        padding: 0;
    }
</style>
